<template>
  <a-form>
    <a-row :gutter="24" v-if="area == 'category'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="问题分类">
          <a-select style="width:100%" allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.categoryID">
            <a-select-option v-for="(item, index) in questionDict" :key="item.ID" :value="item.ID">
              {{ item.Title }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="分数">
          <a-input-number :min="1" :max="100000" v-model="queryParam.startScore" :style="{ display: 'inline-block', width: 'calc(50% - 12px)', textAlign: 'center' }" allowClear />
          <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">至</span>
          <a-input-number :min="1" :max="100000" v-model="queryParam.endScore" :style="{ display: 'inline-block', width: 'calc(50% - 12px)', textAlign: 'center' }" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout1" label="描述">
          <a-input v-model="queryParam.scoreDescribe" allowClear />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="area == 'question'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="年龄段">
          <treeselect :show-count="true" :options="ageGroupDrop" v-model="ageGroupValue" placeholder="请选择年龄段..." :normalizer="normalizer" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="问题分类">
          <a-select style="width:100%" allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.categoryID">
            <a-select-option v-for="(item, index) in questionDict" :key="item.ID" :value="item.ID">
              {{ item.Title }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="分数">
          <a-input-number :min="1" :max="100000" v-model="queryParam.score" :style="{ width: '100%' }" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="星标">
          <a-rate v-model="queryParam.star" />
        </a-form-item>
      </a-col>
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout1" label="题目关键字">
          <a-input v-model="queryParam.questionDescribe" allowClear />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :lg="12" :md="24" :sm="24" style="float:right">
        <a-form-item :style="{ float: 'right' }">
          <!-- <a @click="toggle">
            {{ more ? '展开' : '收起' }}
            <a-icon :type="more ? 'caret-down' : 'caret-up'" />
          </a> -->
          <a-button type="primary" style="margin-left: 14px;" @click="onSearch(queryParam)">查询</a-button>
          <a-button @click="add" style="margin-left: 14px;">添加</a-button>
          <!-- <a-button v-if="displayf != 'choose'" style="margin-left: 14px;" @click="importExcel(queryParam)">导入</a-button> -->
          <a-popconfirm placement="left" v-if="isAdmin()" title="确定删除?" okText="确定" cancelText="取消" @confirm="deleted">
            <a-button type="danger" style="margin-left: 14px;">删除</a-button>
          </a-popconfirm>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import '@/views/treeselect1.css'
import { questionCategoryList } from '@/api/question'
import { dropList } from '@/api/drop'
import { getDictByCode } from '@/api/dict'
import dropValue from '@/views/dropValue'
import { areaList } from '@/api/area'
import CollapseTransition from '@/views/transition'
import moment from 'moment'
import { deleteChildrenIfNull2 } from '@/utils/util'
import { authDevice } from '@/utils/mixin'
const exampleExls = process.env.VUE_APP_API_BASE_URL + '/Excel/模版/清二股份经济合作社股东导入模板.xlsx'
export default {
  name: 'SearchForm',
  mixins: [authDevice],
  components: { moment, CollapseTransition, Treeselect },
  props: {
    area: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      a: process.env.VUE_APP_API_BASE_URL + '/api/students/ImportExcel',
      normalizer(node) {
        return {
          id: node.ID,
          label: node.Title,
          children: node.Childrens
        }
      },
      more: false,
      open: false,
      queryParam: {
        categoryID: null,
        startScore: null,
        endScore: null,
        scoreDescribe: null,
        ageGroupID: null,
        questionDescribe: null,
        score: null,
        star: null
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      questionDict: [],
      ageGroupDrop: [],
      ageGroupValue: null
    }
  },
  watch: {},
  computed: {},
  methods: {
    moment,
    toggle() {
      this.more = !this.more
    },
    openChange(status) {
      if (status) {
        this.open = true
      } else {
        this.open = false
      }
    },
    panelChange(value) {
      this.queryParam.birthdayYear = value
      this.open = false
    },
    clearData() {
      Object.assign(this.queryParam, {
        name: null,
        oldAddress: null,
        iDNumber: null
      })
    },
    add() {
      this.$emit('handleAdd')
    },
    deleted() {
      this.$emit('handleDel')
    },
    enSure() {
      this.$emit('handleEnSure')
    },
    onChangeDate(dates, dateStrings) {
      this.startDate = dateStrings[0]
      this.endDate = dateStrings[1]
      this.queryParam.consultationTimeStart = dateStrings[0]
      this.queryParam.consultationTimeEnd = dateStrings[1]
    },
    onSearch(data) {
      const objData = { ...data }
      this.$emit('search', Object.assign({}, objData, { ageGroupID: this.ageGroupValue }))
    },
    exportExcel(data) {
      const objData = { ...data }
      this.$emit('exportXls', objData)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    download() {
      window.open(this.exampleExls)
    },
    beforeUpload(file) {
      this.a = process.env.VUE_APP_API_BASE_URL + '/api/students/ImportExcel'
      const isJpgOrPng = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isJpgOrPng) {
        this.$message.error('您只能上传Excel文件!')
      }
    },
    handleChange(info) {
      const file = info.file
      const isJpgOrPng = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (isJpgOrPng) {
        let fileList = [...info.fileList]
        this.fileList = fileList
        // if (file.response) {
        //   if (info.file.status === 'done') {
        //     this.$message.info(file.response)
        //     this.fileList = []
        //   }
        // }
        if (info.file.status === 'done') {
          if (file.response) {
            this.$message.info(file.response)
            this.fileList = []
          }
        }
      }
    },
    removeChildrenIfNUll(data) {
      data.map(a => {
        if (a && a.Childrens && a.Childrens.length > 0) {
          this.removeChildrenIfNUll(a.Childrens)
        } else {
          deleteChildrenIfNull2(a)
        }
      })
    },
    changeCategory(value) {
      if (value) {
        questionCategoryList({ pageSize: Math.max(), index: 1, categoryID: value }).then(res => {
          this.dict2 = res.data
        })
      } else {
        this.dict2 = []
      }
    },
    removeChildrenIfNUll(data) {
      data.map(a => {
        if (a && a.Childrens.length > 0) {
          this.removeChildrenIfNUll(a.Childrens)
        } else {
          deleteChildrenIfNull2(a)
        }
      })
    }
  },
  created() {
    dropList({ categoryId: dropValue.questionDict }).then(res => {
      this.questionDict = res
    })
    dropList({ categoryId: dropValue.ageGroupDict }).then(res => {
      this.ageGroupDrop = res
      this.removeChildrenIfNUll(this.ageGroupDrop)
    })
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
